<template>
  <div class="h-panel">
    <PaasTitleBar></PaasTitleBar>
    <div class="h-panel-bar">
      <Button @click="chooseAll" text-color="blue" size="xs">全选</Button>
      <Button @click="chooseNull" text-color="blue" size="xs">清除</Button>&nbsp;&nbsp;
      <Button @click="expandAll" text-color="blue" size="xs">展开</Button>
      <Button @click="foldAll" text-color="blue" size="xs">收缩</Button>
    </div>
    <div class="h-panel-body bottom-line" style="overflow-y:auto;max-height:75vh">
      <Form ref="form" :validOnChange="true" :showErrorTip="true" labelPosition="true" :labelWidth="110" :rules="vRules" :model="model">
        <FormInput label="角色名称" prop="name" type="text" v-model="model.name"></FormInput>
        <FormItem label="角色权限" prop="menuIds">
          <Tree :option="param" :multiple="true" ref="menuTree" v-model="model.menuIds" choose-mode="some" :filterable="true"></Tree>
        </FormItem>
      </Form>
    </div>
    <PaasButtonBar></PaasButtonBar>
  </div>
</template>
<script>
export default {
  async mounted() {
    let id = this.$route.query.id;
    if (!!id) {
      this.$axios
        .get(this.$store.state.menus.current + "/" + id)
        .then((res) => {
          this.model = res.data.data;
        });
    }
  },
  data() {
    return {
      model: {
        name: "",
        menuIds: "",
      },
      vRules: {
        required: ["name", "menuIds"],
      },
      param: {
        keyName: "id",
        titleName: "title",
        childrenName: "children",
        dataMode: "tree",
        getTotalDatas: (resolve) => {
          this.$axios.post("/sysmenus/roles").then((res) => {
            resolve(res.data.data);
          });
        },
      },
    };
  },
  methods: {
    expandAll() {
      this.$refs.menuTree.expandAll();
    },
    foldAll() {
      this.$refs.menuTree.foldAll();
    },
    chooseAll() {
      this.$refs.menuTree.chooseAll();
    },
    chooseNull() {
      this.model.menuIds = [];
    },
  },
  deactivated() {
    this.$destroy(true);
  },
};
</script>